<template>
  <div class="monitor-setting-root">
    <el-form label-width="80px" ref="settingFormRef" :model="settingForm" :rules="settingFormRules">
      <el-form-item label="应用名" prop="appName">
        <el-row :gutter="20">
          <el-col :span="22">
            <el-input v-model="settingForm.appName" />
          </el-col>
          <el-col :span="2">
            <el-button @click="getSetting">查询</el-button>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="告警手机">
        <el-input v-model="settingForm.phone" />
      </el-form-item>
      <el-form-item label="告警邮箱">
        <el-input v-model="settingForm.email" />
      </el-form-item>
      <el-form-item label="企业微信机器人">
        <el-input v-model="settingForm.wechatRobot" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="saveSetting(settingFormRef)">保存配置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { ElNotification } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
import { getSettingApi, saveSettingApi } from '@/api/guardcat'

const settingFormRef = ref<FormInstance>()
const settingForm = ref({
  appName: '',
  phone: '',
  email: '',
  wechatRobot: '',
})
const settingFormRules = reactive<FormRules>({
  appName: [{ required: true, message: "应用名称为必填", trigger: 'blur' }]
});

const getSetting = () => {
  getSettingApi({ appName: settingForm.value.appName }).then((resp: any) => {
    settingForm.value = resp.data
  })
}

const saveSetting = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      let data = {
        ...settingForm.value
      }
      saveSettingApi(data).then(_ => {
        ElNotification({
          title: '提示',
          message: '配置信息保存成功',
          type: 'success',
          position: 'bottom-right'
        });
      })
    } else {
    }
  })
}

</script>

<style scoped lang="scss">
.monitor-setting-root {
  @include box(100%, 100%);
}
</style>